<template>
	<view class="footer">
		<view class="footer-left"></view>
		<view class="footer-center"><input class="input-text" type="text" v-model="inputValue" @focus="focusInput" /></view>
		<view class="footer-right" @tap="sendMessge">
			<view id="msg-type">发送</view>
		</view>
	</view>
</template>

<script>
	import md5 from '@/common/js/md5/md5.min.js'
	import config from '@/common/js/config.js'
	export default {
		name: 'chat-input',
		data() {
			return {
				inputValue: ''
			};
		},
		methods: {
			sendMessge: function() {
				var that = this;
				if (that.inputValue.trim() == '') {
					that.inputValue = '';
				} else {
					//点击发送按钮时，通知父组件用户输入的内容
					this.$emit('send-message', {
						type: 'text',
						content: that.inputValue
					});
					that.inputValue = '';
				}
			},
			focusInput: function() {
				// #ifdef APP-PLUS
					const resoHeight = plus.screen.resolutionHeight;
					this.$emit('onfocusInput', resoHeight);
				// #endif
			}
		}
	};
</script>

<style>
	.footer {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 88upx;
		min-height: 60upx;
		border-top: solid 1px #bbb;
		overflow: hidden;
		/* padding: 16upx 0; */
		background-color: #fafafa;
	}

	.footer-left {
		width: 23upx;
		height: 88upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.footer-right {
		width: 100upx;
		height: 88upx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #339AFF;
	}

	.footer-center {
		flex: 1;
		/* height: 88upx; */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.footer-center .input-text {
		flex: 1;
		background: #fff;
		border: solid 1upx #ddd;
		padding: 6upx !important;
		font-family: verdana !important;
		overflow: hidden;
		border-radius: 15upx;
	}

	.foot-brow {
		width: 69upx;
		height: 88upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
